<template>
  <div class="PageLiftMenu">
    <div class="pageSide">
      <div class="pageMenu">
        <div class="item" :class="{routeractive : showsubmenu}" @click="submenu()">
          <img src="../images/overview.png" >{{lang['asset view']}}
          <span class="assetsIcon" :class="{assetsIconclick : showsubmenu}"></span>
        </div>
        <div class="showsubmenu" v-show="showsubmenu">
          <a :class="{linkColor : linkColors === 2}" @click="linkColor(2)">{{lang['digital currency']}}</a>
          <a :class="{linkColor : linkColors === 1}" @click="linkColor(1)">{{lang['fiat']}}</a>
        </div>

        <router-link class="item" to="/assets/records/" :title="lang['financial records']">
          <img src="../images/records.png" >
            {{lang['financial records']}}
            <font class="unReadNotinfo" v-show="description"></font>
          </router-link>

        <router-link class="item" to="/assets/address/" :title="lang['coin raising address management']">
          <img src="../images/address.png" >{{lang['coin raising address management']}}</router-link>

        <router-link class="item" to="/assets/bankcard/" :title="lang['bank card management']">
          <img src="../images/bankcard.png" >{{lang['bank card management']}}</router-link>

        <!-- <router-link class="item" to="/assets/remitInfo/">汇款信息</router-link> -->
        <router-link class="item" to="/assets/escrow/">
          <img src="../images/otherPayment.png">{{lang['third party payment']}}
        </router-link>

    </div>
  </div>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'

export default {
  mixins: [commonMixins],
  data () {
    return {
      showsubmenu: false,
      iSfiatmoney: true,
      iSvirtualcurrency: true,
      linkColors: false,
      description: false

    }
  },
  methods: {
    fiatmoney () {
      this.$emit('showfiatmoney', this.iSfiatmoney)
    },
    virtualcurrency () {
      this.$emit('showvirtualcurrency', this.iSvirtualcurrency)
    },
    submenu () {
      this.showsubmenu = !this.showsubmenu
    },
    linkColor (e) {
      this.linkColors = e || 2
      this.$router.push({path: '/assets/?AssetsType=' + e})
    },
    getUnReadNotification () {
      this.$http.get('CustomerNotification/GetUnReadNotification')
      .then((res) => {
        if (res.StatusCode === '200') {          
          res.Data = res.Data || []
          this.description = (res.Data.UnRead === 0)
        }
      })
    }
  },
  mounted () {
    this.getUnReadNotification()
    this.$nextTick(() => {
      this.$on('getUnReadNotInfo', function (result) {
        this.getUnReadNotification()
      })
    })
  }
}
</script>

<style lang="less">
.PageLiftMenu {
  .pageMenu{
    position: relative;

    .item:hover {
      color: #fff !important;
      background-color: #1c3956;
      cursor: pointer;
    }

    .routeractive {
      color: #fff !important;
      background-color: #3782FF;
    }

    .assetsIcon{
      position: absolute;
      right: 10px;
      top: 16px;
      background: url(../images/assetsIcon2.png) no-repeat center center;
      width: 14px;
      height: 14px;
    }
    
    .assetsIconclick{
      position: absolute;
      right: 10px;
      top: 16px;
      background: url(../images/assetsIcon1.png) no-repeat center center;
      width: 14px;
      height: 14px;
    }

    a.linkColor{
      background: #314363 !important;
    }

    .showsubmenu{
      a{
        color: #fff;
        display: block;
        background: #17283C;
        height: 48px;
        line-height: 48px;
        padding-left: 45px;
        margin-bottom: 1px;
      }
      a:hover{
        background: #314363;
      }
    }

    .unReadNotinfo {
      display: inline-block;
      margin-left: 5px;
      width: 6px;
      height: 6px;
      background: #B23030;
      border-radius: 100%;

    }
  }
}
</style>
